<template>
  <div class="Back">
       
       <div id="Information">
          <div id="Title" class="flex">
               编辑用户信息
              <i class="el-icon-close exit" @click="EDITINFORMATIONDOWN"></i>
           </div>
        
        <!-- form表单 -->
        <el-form ref="form" :model="form" label-width="80px" class="form flex" v-if="form" >



            <!-- 头像 -->
            <!-- <el-form-item  class="flex imgBox"> -->
              <div class="flex" style="width:100%">
              <div class="imageBox flex">
                  <img :src="form.headphoto" class="headphoto">
                  <div class="set flex" @click="uploadImageStar">
                      <input type="file" style="display:none" @change="uploadImage" ref="uploadImage">           
                      <font-awesome-icon icon="camera" class="icon"/>
                  </div>

              </div>
            </div>
            <!-- </el-form-item> -->

      

            <!-- 性别 -->
            <el-form-item label="性别">
                    <el-radio border label="男" v-model="form.sex"  class="radio"></el-radio>
                    <el-radio border label="女" v-model="form.sex"  class="radio" ></el-radio>
            </el-form-item>
        


        <!-- 生日 -->
            <el-form-item label="生日">
            <el-date-picker  placeholder="选择日期"  type="date" value-format="yyyy-MM-dd HH:mm:ss" return-type="timestamp" v-model="form.birthday"></el-date-picker>
            </el-form-item>

            <!-- 地址 -->
            <el-form-item label="居住地" class="address">
                  <el-input v-model="form.address"></el-input>
                  <font-awesome-icon icon="location-dot" class="icon"  @click="getPosition()"/>
            </el-form-item>

            <!-- 功能-->
            <el-form-item >
              <el-button  @click="editUser_"  class="button">保存</el-button>
              <el-button  @click="EDITINFORMATIONDOWN" >取消</el-button>
            </el-form-item>


           

        </el-form>

    </div>
  </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex'
import {file} from '@/common/file'
export default {
    name: "",
    data() {
        return {
            form:null,
        }
    },
    computed:{
         ...mapState('Personal',['PersonalData']),//个人主页信息
         ...mapState('Init',['Location'])
    },
    methods:{
      ...mapMutations('Tool',['WAITON','WAITDOWN']), //等待组件
       ...mapMutations('Personal',['SETPERSONALDATA','EDITINFORMATIONDOWN']),  //修改用户主页信息 修改用户主页信息窗口
      ...mapActions('Login',['editUser']), //编辑用户
      //获取定位
      getPosition(){
        this.form.address = this.Location?.address
      },
      //触发上传图片
      uploadImageStar(){
         this.$refs.uploadImage.click()
      },
      // 上传图片
     async uploadImage(e){
         this.WAITON('上传图片中')
         let image=e.target.files[0]
         let imageSize=image.size/1024/1024
         if(imageSize>2)
          { 
            this.$message.error('上传图片大小不能超过 2MB!')
            this.WAITDOWN()
            return 
          }
         let res = await  file.uploadImage('HeadPhoto',image)
         if(res.code==200)
         this.form.headphoto=res.data
         else this.$message.error(res.msg)
         setTimeout(() => {
          this.WAITDOWN()
         }, 200);
      },

      //修改用户
      async editUser_(){
         let res =await this.editUser(this.form)
         if(res.code!=200)
         this.$message.error(res.message)
         else{
            this.$message.success(res.message)
            this.SETPERSONALDATA(res.data)
            this.EDITINFORMATIONDOWN()
         }
      }
    },
   
    watch:{   
       PersonalData:{
           immediate:true,
           handler(newValue){
             this.form=Object.assign({},newValue)
           }
        },
    }
   
};
</script>
<style scoped lang='less'>
::v-deep .el-form-item__label{
  color: black !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
   background: var(--GeneralBackColor);
   border-color: var(--GeneralBackColor);
}
::v-deep .el-radio__input.is-checked+.el-radio__label{
    color: var(--GeneralBackColor);
}
.imgBox{
  width: 100%;
  background: black;
}
.imageBox{
      // width: 100%;
     position: relative;
     margin-bottom: 20px;

    .headphoto{
      width: 60px;
      height: 60px;
      border-radius: 5px;
      object-fit: cover;
    }
    .set{
       position: absolute;
       width: 20px;
       height: 20px;
       border-radius: 50%;
       overflow: hidden;
       bottom:0px;
       right: -5px;
       background: white;


       .icon{
         width: 12px;
         height: 12px;
       }
    }
}
#Information{
    max-width: 90vw;
    max-height: 90vh;
    background: var(--GeneralBackColor-half);
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
}
#Title{
    height: 50px;
    width: 100%;
    background: var(--GeneralBackColor);
    position: relative;
    color: white;
    font-weight: 600;
    
}
.form{
    // padding: 50px;
    // padding-right: 100px;
    // padding-bottom: 20px;
    // padding-top: 20px;
    width: 300px;
    margin: 5px;
    position: relative;
    padding: 20px;
    justify-content: flex-start;

    .button{
         background: var(--PersonalBackColor);
         border: none;
         color: white;
    }
    //  单选框
    .radio{
         border: 1px solid var(--PersonalBackColor);
    }

}

.location{
    width: 300px;
    padding: 50px;
    background: var(--PersonalBackColor);
    border-radius: 15px;
}
.exit{
    right: 15px;
    color: white;
    font-size: 20px;
    font-weight: 600;
}
.exit:hover{
    background: rgba(0, 0, 0, 0.5);
}

.address{
  flex-wrap: nowrap;

  .icon{
    position:absolute;
    right: -25px;
    top: 10px;
    font-size: 18px;
    color: var(--fontColor);
  }
}
</style>